<template>
	<view>
		<wrapBgImgVue
			bgImg="goods/goods_top.png"
		/>
		
		<navigationBarVue
			:bgImgType="1"
			navigationTitle="店铺二维码"
			@onTotalHeight="onTotalHeight"
		/>
		
		<view class="wrap flex align-center just-center"
			:style="'padding-top: calc(' + (topHeight + 10) + 'px) !important;'"
		>
			<view class="wrap-content" v-if="dataInfo">
				<image
					class="avatar"
					mode="aspectFill"
					:src="$wanlshop.oss(dataInfo.avatar)"
				/>
				
				<view class="white-content flex column align-center">
					<view class="shopname">
						{{ dataInfo.shopname }}
					</view>
					
					<view class="shopcode">
						店铺ID:{{ dataInfo.shopcode }}
					</view>
					
					<view class="title">
						扫码成为本店会员
					</view>
					
					<view class="code-img-bg flex align-center just-center bg-img-set"
						:style="'background-image: url(' + $staticImagePath('store/code_bg.png') + ')'"
					>
						<image
							class="img"
							mode="aspectFill"
							:src="$wanlshop.oss(dataInfo.shop_code_image)"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from "../components/navigationBar/navigationBar.vue";
	import wrapBgImgVue from "../components/navigationBar/bgImg.vue";
	export default {
		components: {
			navigationBarVue,
			wrapBgImgVue,
		},
		data() {
			return {
				topHeight: 0, //顶部高度
				
				dataInfo: null,
			};
		},
		onLoad(options) {
			if (options.hasOwnProperty("obj")) {
				var obj = JSON.parse(options.obj);
				
				this.dataInfo = obj;
			}
		},
		methods: {
			/**
			 * 高度
			 */
			onTotalHeight(height) {
				this.onTotalHeight = height;
			},
		},
	}
</script>

<style lang="scss">
	.wrap {
		height: 100vh;
		box-sizing: border-box;
		
		.wrap-content {
			width: 684rpx;
			overflow: hidden;
			padding-top: 75rpx;
			position: relative;
			z-index: 1;
			
			.white-content {
				width: 100%;
				padding: 100rpx 30rpx;
				box-sizing: border-box;
				background-color: white;
				border-radius: 20rpx;
				position: relative;
				z-index: 2;
				
				.shopname {
					color: #333333;
					font-size: 30rpx;
				}
				
				.shopcode {
					margin-top: 50rpx;
					padding: 0rpx 30rpx;
					box-sizing: border-box;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border: 2rpx solid #4982EA;
					border-radius: 30rpx;
					color: #84BD00;
					font-size: 30rpx;
					background: linear-gradient(to right, rgba(87, 144, 248, 0.2), rgba(73, 130, 234, 0.2));
				}
				
				.title {
					margin-top: 50rpx;
					color: #333333;
					font-weight: bold;
					font-size: 33rpx;
				}
				
				.code-img-bg {
					margin-top: 50rpx;
					width: 478rpx;
					height: 387rpx;
					overflow: hidden;
					
					.img {
						width: 349rpx;
						height: 349rpx;
					}
				}
				
			}
			
			.avatar {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 0;
				width: 130rpx;
				height: 130rpx;
				border-radius: 100%;
				overflow: hidden;
				z-index: 3;
			}
		}
	}
</style>